html{
    font-size: 14px;
}
body{
    width: 100vw;
    height: 100vh;
    display: grid;
    justify-content: center;
    align-items: center;
    main{
        width: 400px;
        height: 200px;
        position: relative;
        transform-style: preserve-3d;
        transform-origin: center center -100px;
        transition-duration: 5s;
        transform: perspective(900px);
        div{
            display: grid;
            justify-content: center;
            align-items: center;
            position: absolute;
            transform-origin: center center -100px;
            opacity: 0.6;
            @for $i from 1 to 5 {
                &:nth-child(#{$i}){
                    transform: rotateX(#{$i * 90}deg);
                }
            }
            &:nth-child(5){
                transform: rotateY(90deg) translateZ(200px);
            }
            &:nth-child(6){
                transform: rotateY(-90deg);
            }
            
        }
        &:hover{
            transform: perspective(900px) rotateX(720deg) rotateY(720deg) rotateZ(720deg);
        }
    }
}
